<template>
  <div>
    <!-- 页面基础模板 -->
    <base-header-footer
      :isShowContentTitle="false"
      :isShowBreadCrumb="true"
      :isShowArchived="true"
    >
      <!-- isShowTitle : 布尔值，是否显示当前页面标题组件-->
      <!-- isShowBreadCrumb : 布尔值，是否显示当前页面面包屑导航组件-->
      <!-- isShowArchived : 布尔值，是否显示当前页面归档组件-->
      <template slot="content-item">
        <!-- 内容插槽 -->
        <article-list>
          <template slot="title"
            ><div class="article-title">
              {{ contentTitle?.title }}
            </div></template
          >
        </article-list>
      </template>
    </base-header-footer>
  </div>
</template>

<script>
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import ArticleList from "@/components/articlelist/ArticleList.vue";
import BaseHeaderFooter from "@/components/baseheaderfooter/BaseHeaderFooter.vue";
import { mapState } from "vuex";
// import { getContentTitle } from "@/api/api";
export default {
  name: "",
  components: {
    BreadCrumb,
    ArticleList,
    BaseHeaderFooter,
  },
  head() {
    return {
      title: this.headTitle,
    };
  },
  data() {
    return {
      contentTitle: {},
    };
  },
  computed: {
    ...mapState(["headTitle"]),
  },
  async asyncData(app) {
    //获取文章列表标题
    let classifyPath =
      app.route.path.indexOf("/page/") != -1
        ? app.route.path.slice(0, app.route.path.indexOf("/page/"))
        : app.route.path;
    const resContentTitle = await app.$api.getContentTitle({ classifyPath });
    let contentTitle = resContentTitle.data[0];
    return {
      contentTitle,
    };
  },
};
</script>
<style lang="less" scoped>
</style>